<!-- 视图层 -->
<template>
  <div class="about">
   <div class="header">
    <van-nav-bar title="详情" left-text="返回" left-arrow  @click-left="onClickLeft">
   <template #right>
    <van-icon/>
   </template>
  <template #title>
    <ul>
        <li>商品</li>
        <li>评价</li>
        <li>详情</li>
        <li>推荐</li>
    </ul>
  </template>
</van-nav-bar>
   </div>
   <div class="sectiond">
    <div class="swp">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"
        @change="getIndex">
        <van-swipe-item v-for="item in banners" @click="showImg">
        <img :src="item" alt="">
        </van-swipe-item>
        </van-swipe>  
    </div>
   
        <h3>
        <van-tag color="#ffe1e1" text-color="#ad0000">{{ cate }}</van-tag>
        <van-text-ellipsis :content="title" rows="2" />
        </h3>
        <div class="cai">
          <b>猜你喜欢</b>
        </div>
        <van-swipe class="my-swipe"  indicator-color="red">
        <van-swipe-item v-for="item in recLen">
          <van-grid :column-num="3">
            <van-grid-item
              v-for="item1 in recommendList.slice(6*(item-1),item*6)"
              :key="item1"
            >
              <template #default>
                    <van-image :src="item1.img1"/>
                    <van-text-ellipsis :content="item1.proname" class="mintitile"/>
                    <p>{{item1.originprice+'元'}}</p>
              </template>
            </van-grid-item>
          </van-grid>
        </van-swipe-item>
      </van-swipe>
   </div>
   <div class="weir">

   </div>
   <div class="footerd">
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-action-bar-icon icon="cart-o" text="购物车" />
      <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
      <van-action-bar-button type="warning" text="加入购物车" />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
   </div>
  </div>
</template>

<!-- 逻辑层 -->
<script setup>
import { getDetail } from '@/api/home';
import { ref,computed,onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { showImagePreview } from 'vant';
import { getRecommendList } from '@/api/home';
  const onClickLeft = () => history.back();
  const detailList = ref([])
  const route = useRoute()
  const banners = ref([]) 
  const title = ref("");
  const cate = ref("")
  const issale = ref(1)
  const recommendList = ref([]);
  const recLen = computed(() => Math.ceil(recommendList.value.length / 6));
  onMounted(() => {
  getRecommendList().then(({ data: res }) => {
    // console.log(res.data);
    recommendList.value = res.data;
  });
});

  getDetail(route.params.proid).then(({data: res}) => {
    detailList.value=res.data;
    console.log(detailList.value);
    banners.value = res.data.banners[0].split(',');
    title.value = res.data.proname;
    cate.value = res.data.category;
    issale.value = res.data.issale;
  });

  const index = ref(0) //用于获取点击当前的图片的下标
  const getIndex = (i) => {
     index.value = i;
  }
  const showImg= ()=>{
    showImagePreview({
      images: banners.value,
      startPosition: index.value,
      closeable: true,//关闭按钮
    });
  }
 

</script>


<!-- 样式层 -->
<style lang="less" scoped>

 .header{
    position: sticky;
    top:0;
    z-index:1;
    .van-nav-bar{
    height:55px;
    background-color: palevioletred;
    padding-top: 7px;
    box-sizing: border-box;
    --van-nav-bar-text-color:#fff;
    --van-nav-bar-title-text-color:#fff;
 }
 ul {
    display: flex;
    li {
      padding: 0px 6px;
    }
  }
 }
 .sectiond{
    .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #ffb9d8;
    img{
        width: 100%;
        height: 330px;
    }
  }
     //类别标签格式
     .van-tag{
        font-size: 15px;
         margin-top: 20px ;
          margin-bottom: 10px;
         }

       //标签名格式
       .van-text-ellipsis{
          font-size: 20px;
          font-weight: 600;
          margin-bottom: 20px;
       } 
    
    .cai{
        height: 40px;
        background: linear-gradient(to right,rgb(237, 54, 118),#fff);
        width: 100%;
        line-height: 40px;
        b{
            color: #ffffff;
            margin-left: 10px;
            font-size: 17px;
            font-weight: 500;
        }
      
    }
    .my-swipe{
       
        border-top: 5px solid rgb(255, 255, 255);
       .mintitile{
         font-size: 15px;
       }
       p{
        color: red;
        font-weight: 600;
       }
     }
   
    
  
 }

  .weir{
    height: 400px;
    background-color: #ffb9d8;
    margin-top: 30px;
  }

 .footerd{
        background-color: rgb(206, 50, 131);
        .van-action-bar{
            border-top: 1px solid rgb(229, 148, 206);
            .van-action-bar-button{
                --van-action-bar-button-warning-color: linear-gradient(to right,#fff2fa,rgb(244, 122, 157));
                --van-action-bar-button-danger-color: linear-gradient(to right,#ef7f9d,rgb(190, 71, 115));
            }
        }
       
 }
 
</style>
